import React from 'react'
import {
    SafeAreaView,
    ScrollView,
    StyleSheet,
    Image,
    Text,
    View
} from 'react-native'

import Ionicons from 'react-native-vector-icons/Ionicons'
import Feather from 'react-native-vector-icons/Feather'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import AntDesign from 'react-native-vector-icons/AntDesign'
import Entypo from 'react-native-vector-icons/Entypo'
import theme from '../../config/theme'

function My() {
    return (
        <View style={styles.container}>
            <View style={styles.iconBox}>
                <Feather name="calendar" color="#ffffff" size={20}/>
                <MaterialCommunityIcons style={{paddingHorizontal: 20}} name="qrcode-scan" color="#ffffff" size={20}/>
                <Ionicons name="settings-outline" color="#ffffff" size={20}/>
            </View>
            <View style={styles.body}>
                <View style={styles.avatar}>
                    <Image
                        style={styles.avatarImg}
                        source={{uri: 'https://1img.hanjutv.com/201910/2a326deba7.jpg'}}
                    />
                    <View>
                        <Text style={{color: '#333333', fontSize: 16}}>牛的壹</Text>
                        <Text style={{color: '#666'}}>ID：122788108</Text>
                    </View>
                </View>
                <View style={{backgroundColor: "#f5f5f5", height: 6, width: '100%'}}></View>

                <View style={styles.record}>
                    <View style={styles.recordItem}>
                        <AntDesign name="clockcircle" color="#ff87b4" size={36}/>
                        <Text style={styles.text}>历史记录</Text>
                    </View>
                    <View style={styles.recordItem}>
                        <AntDesign name="star" color="#ffc519" size={36}/>
                        <Text style={styles.text}>我的收藏</Text>
                    </View>
                    <View style={styles.recordItem}>
                        <Entypo name="newsletter" color="#07c1ac" size={36}/>
                        <Text style={styles.text}>我的收藏</Text>
                    </View>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.mainBackgroundColor
    },
    iconBox: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "flex-end",
        paddingTop: 20,
        paddingBottom: 10,
        paddingRight: 20,
    },
    body: {
        flex: 1,
        backgroundColor: theme.whiteColor,
        borderTopRightRadius: 10,
        borderTopLeftRadius: 10
    },
    avatar: {
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 15,
        paddingHorizontal: 15,
    },
    avatarImg: {
        width: 60,
        height: 60,
        borderRadius: 30,
        marginRight: 20
    },
    record: {
        display: "flex",
        flexDirection: "row",
        flexWrap: "wrap"
    },
    recordItem: {
        width: '25%',
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        paddingVertical: 15
    },
    text: {
        marginTop: 10
    }
})

export default My
